<template>
  <div class="chaobiaobox">
    <div style="text-align: right;margin-bottom: 10px;">
    <div class="title" style="display: inline-block;font-size: 20px;">{{ formlist.bizOrgName }}配电室{{ formlist.date }}日抄表清单（kWh）</div>
    <div style="display: inline-block;width:35%;" class="tabbar">
      <el-button type="primary" size="small" @click="daochu" ><i class="el-icon-upload2" >导出</i></el-button>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <span style=" cursor: pointer;margin: 0 10px;" @click="shuaxin"><i class="el-icon-refresh-right"></i></span>
      </el-tooltip>
      <el-dropdown trigger="click" @command="command">
      <span class="el-dropdown-link">
        <el-tooltip class="item" effect="dark" content="密度" placement="top">
        <span style=" cursor: pointer;"><i class="el-icon-d-caret"></i></span>
      </el-tooltip>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item command="默认">默认</el-dropdown-item>
        <el-dropdown-item command="中等">中等</el-dropdown-item>
        <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      <!-- <el-tooltip class="item" effect="dark" content="列设置" placement="top">
        <span><i class="el-icon-setting"></i></span>
      </el-tooltip> -->
    </div>
  </div>
    <div class="tablebox">
      <template>
        <el-table
        v-loading="loading"
          :data="tablechao"
          style="width: 100%"
            border
            id="exportTab"
            ref="table"
            :size="iissize"
            height="100%"
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          >
          <el-table-column
          fixed
            prop="devName"
            label="设备名称"
            sortable
            width="250">
          </el-table-column>
          <el-table-column
            prop="hour0"
            align="right"
            label="00:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour1"
            align="right"
            label="01:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour2"
            align="right"
            label="02:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour3"
            align="right"
            label="03:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour4"
            align="right"
            label="04:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour5"
            align="right"
            label="05:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour6"
            align="right"
            label="06:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour7"
            align="right"
            label="07:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour8"
            align="right"
            label="08:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour9"
            label="09:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour10"
            align="right"
            label="10:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour11"
            label="11:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour12"
            align="right"
            label="12:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour13"
            label="13:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour14"
            label="14:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour15"
            align="right"
            label="15:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour16"
            label="16:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour17"
            label="17:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour18"
            align="right"
            label="18:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour19"
            label="19:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour20"
            label="20:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour21"
            label="21:00"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour22"
            align="right"
            label="22:00"
            width="100">
          </el-table-column>
          <el-table-column
            prop="hour23"
            align="right"
            label="23:00"
            width="100">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { exportribiaoapi } from '@/api/ElectricalDistribution/dayreport'
export default {
  name: 'ReportFormsChaobiao',
  props: {
    tablechao: {
      type: Array
    },
    formlist: {
      type: Object
    },
    form: {
      type: Object
    }
  },
  data () {
    return {
      tableData: [],
      loading: false,
      iissize: 'medium'
    }
  },

  async mounted () {

  },

  methods: {
    async daochu () {
      const res = await exportribiaoapi({ ...this.form,orgName:this.formlist.bizOrgName,switchroomName:this.formlist.switchroomId, isParams: true })
      console.log(res)
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '日抄表清单.xls')
    },
    shuaxin () {
      this.$emit('shuaxin')
    },
    command (val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    }
  },
  watch: {
    deep: true,
    tablechao (val) {
      if (val[0]) {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chaobiaobox{
  height: 100%;
  .tablebox{
    height: 92%;
  }
}

</style>
